<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乐哥聊编程-路线</title>
	</head>
	<body>
		<div class="header">
			<div class="tabs">
				<div class="tab"><a href="index.html" target="_blank">课程</a></div>
				<div class="tab" style="background-color: #ecf1f3;"><a href="#" target="_blank">路线图</a></div>
				<div class="tab"><a href="https://mp.weixin.qq.com/s/XTkss0hDPMm8YsA0fM6YNA" target="_blank">关于我</a></div>
			</div>
			<div class="banner">
				<img src="banner.png" alt="">
			</div>
		</div>
		<img src="Java .png" alt="" style="width: 100%">
	</body>
	<style>
		
		.banner img {
			width: 100%;
		}
		
		.tabs {
			display: flex;
			font-size: 24px;
			justify-content: center;
			padding: 10px 0;
			background-color: #fff;
		}
		
		.tabs .tab:hover {
			background-color: #ecf1f3;
		}
		
		.tabs .tab {
			color: #000;
			cursor: pointer;
			text-align: center;
			font-size: 20px;
			margin: 0 40px;
			height: 40px;
			font-weight: 0;
			line-height: 40px;
			border-radius: 20px;
			width: 100px;
		}
		
		a {
			text-decoration: none;
		}
		
		.pane {
			padding: 50px;
			box-sizing: border-box;
		}
		
		body {
			margin: 0;
			padding: 0;
			background-color: #ecf1f3
		}
	</style>
</html>